<template>
  <div class="message">
    <div class="mess_item" v-for="item in msgList" :key="item.id">
      <image class="mess_icon" :src="item.url"></image> 
      <div class="mess_main">
        <div class="msg_box">
          <div class="mess_mian_title">{{ item.title }}</div>
          <div class="mess_main_info">{{ item.subTilt }}</div>
        </div>
        <div class="arraw_box" @click="goMsg(item.id)">
          <van-icon class="img_arraw" name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      currentId:0,
      msgList:[
        {id:0,url:'/static/img/qa.png',title:'联系过的人',subTilt:'点击可以查看所有牵线消息'},
        {id:1,url:'/static/img/release.png',title:'系统消息',subTilt:'点击查看官方消息'},
        {id:2,url:'/static/img/video.png',title:'我的通知',subTilt:'查看我的通知'},
      ]
    }
  },
  methods:{
    goMsg(val){
      this.currentId = val
      switch(val){
        case 0:
          uni.navigateTo({
            url:'/pages/message/system'
          })
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.message{
  background-color: #fff;
  padding-bottom: 20px;
  .mess_item{
    display: flex;
    padding:20px 15px 0;
    .mess_icon{
      width: 60px;
      height: 60px;
      border-radius: 4px;
      margin-right: 10px;
    }
    .mess_main{
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: 60px;
      border-bottom: 1px solid #f7f7f7;
      flex: 1;
      .mess_mian_title{
        font-size: 14px;
        color: #000;
      }
      .mess_main_info{
        font-size: 12px;
        color: #666;
      }
      .arraw_box{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        .img_arraw{
          font-size: 14px;
          color: #666;
        }
      }
      
    }
   
  }
}
</style>